<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>模板</title>
  </head>
  <body>
    <div id="app">
      <h1>{{ message }}</h1>
    </div>
  </body>
  <script src="../node_modules/vue/dist/vue.js"></script>
  <script>
    /*

    */
    let vm = new Vue({
      // el: "#app",
      // template: "<h2>测试template</h2>",
      data: {
        message: "生命周期钩子函数", //'<div id="app"><h1>生命周期钩子函数</h1></div>'
      },

      //第一阶段：初始化阶段
      beforeCreate() {
        // Vue 实例创建前被调用，数据和模板均未获取到
        console.log("beforeCreate()", this.$el, this.$data); //undefined undefined
      },
      created() {
        //重点：发送ajax获取数据，设置到data里面
        // Vue实例创建后，最早可以获取到 data数据的钩子，但是模板未获取到
        // 建议在这里面发送 ajax 异步请求
        console.log("created()", this.$el, this.$data);
      },
      beforeMount() {
        // 数据挂载之前，获取到了模板，但是数据还未挂载到模板上
        console.log("beforeMount()", this.$el, this.$data);
      },
      mounted() {
        //重点：dom的操作可以在这里写，找到节点，设置属性，设置内容，获取内容
        // 数据已经挂载到模板中了
        console.log("mounted()", this.$el, this.$data);
      },

      //第二阶段：更新阶段
      beforeUpdate() {
        // 当data 数据更新之后，去更新模板中的数据前调用
        console.log("beforeUpdate()", this.$el.innerHTML, this.$data);
      },
      updated() {
        //偶尔用：数据变化就要更新视图
        console.log("updated()", this.$el.innerHTML, this.$data);
      },

      //第三阶段：销毁阶段
      beforeDestroy() {
        //销毁 Vue 实例之前调用
        // 收尾工作
        console.log("beforeDestroy()");
      },
      destroyed() {
        //重点：回收工作：定时器关闭/聊天连接关闭
        //销毁 Vue 实例之后调用。系统帮你解绑事件/销毁数据
        console.log("destroyed()");
      },
    }).$mount("#app");
  </script>
</html>
